fetch('config.json')
            .then(response => response.json())
            .then(config => {
                const backendUrl = config.backendUrl;
                // 在这里使用 backendUrl，比如发送请求给后端
                let currentPage = 1;
                let totalPages = 1;
                const perPage = 10; // 每页显示的数据量

                

                // 加载所有数据并分页
                function loadAllData() {
                    //backendUrl是后端服务器地址和端口，这里是localhost:3000
                    fetch(backendUrl + `/data/all`)
                        .then(response => response.json())
                        .then(data => {
                            const dataBody = document.getElementById('data-body');
                            totalPages = Math.ceil(data.length / perPage);
                            updatePagination();
                            paginateData(data);
                        })
                        .catch(error => console.error('Error fetching data:', error));
                }

                // 分页数据
                function paginateData(data) {
                    const startIndex = (currentPage - 1) * perPage;
                    const endIndex = Math.min(startIndex + perPage, data.length);
                    const paginatedData = data.slice(startIndex, endIndex);
                    displayData(paginatedData);
                }

                // 显示数据
                function displayData(data) {
                    const dataBody = document.getElementById('data-body');
                    dataBody.innerHTML = '';
                    data.forEach(item => {
                        // 创建表格行并添加到容器中
                        const row = document.createElement('tr');
                        row.innerHTML = `
                            <td>${item.id}</td>
                            <td>${item.目标物类别}</td>
                            <td>${item.目标物状态}</td>
                            <td><img id="image${item.id}" src="image/${item.检测数据}" alt="检测数据"></td>
                            <td>${item.检测设备}</td>
                            <td>${item.录入时间}</td>
                            <td>
                                <button id="editBtn${item.id}">编辑</button>
                                <button id="deleteBtn${item.id}">删除</button>
                                <button id="detailsBtn${item.id}">详情</button>
                            </td>
                        `;

                        dataBody.appendChild(row);

                        // 获取图片元素
                        const img = row.querySelector(`#image${item.id}`);

                        // 添加点击事件监听器
                        img.addEventListener('click', function() {
                            zoomImage(this);
                        });

                        // 获取编辑按钮元素
                        const editBtn = row.querySelector(`#editBtn${item.id}`);
                        // 添加点击事件监听器
                        editBtn.addEventListener('click', function() {
                            editData(item.id);
                        });

                        // 获取删除按钮元素
                        const deleteBtn = row.querySelector(`#deleteBtn${item.id}`);
                        // 添加点击事件监听器
                        deleteBtn.addEventListener('click', function() {
                            deleteData(item.id);
                        });

                        // 获取详情按钮元素
                        const detailsBtn = row.querySelector(`#detailsBtn${item.id}`);
                        // 添加点击事件监听器
                        detailsBtn.addEventListener('click', function() {
                            showDetails(item.id);
                        });
                    });
                }


                // 更新分页信息
                function updatePagination() {
                    const pagination = document.getElementById('pagination');
                    pagination.innerHTML = `当前页：${currentPage} / 总页数：${totalPages}`;
                    pagination.innerHTML += '<br>';
                    for (let i = 1; i <= totalPages; i++) {
                        let button = document.createElement('button');
                        button.textContent = i;
                        button.addEventListener('click', function() {
                            changePage(i);
                        });
                        pagination.appendChild(button);
                    }
                    
                }

                // 切换页面
                function changePage(page) {
                    currentPage = page;
                    loadAllData();
                }

                // 初始化
                loadAllData();

                // 删除数据
                function deleteData(id) {
                    // 发送DELETE请求到后端删除数据
                    fetch(backendUrl + `/delete-data/${id}`, {
                        method: 'DELETE'
                    })
                    .then(response => {
                        if (response.ok) {
                            console.log('数据删除成功');
                            // 在页面上移除相应的表格行
                            const row = document.getElementById(`row${id}`);
                            row.remove();
                            // 删除后自动刷新页面，不知道为什么没有生效
                            location.reload();
                        } else {
                            console.error('数据删除失败');
                        }
                    })
                    .catch(error => {
                        console.error('删除请求错误:', error);
                    });
                }

                // 获取需要编辑的数据
                function editData(id) {
                    // 从后端获取要编辑的数据
                    fetch(backendUrl + `/get-data/${id}`)
                    .then(response => {
                        if (response.ok) {
                            return response.json();
                        } else {
                            throw new Error('无法获取要编辑的数据');
                        }
                    })
                    .then(data => {
                        // 显示编辑表单或模态框，并将当前数据填充到表单中
                        showEditForm(data);
                    })
                    .catch(error => {
                        console.error('编辑数据错误:', error);
                    });
                }

                
                // 显示编辑模态框并进行编辑
                function showEditForm(data) {
                    const modal = document.getElementById('edit-data-modal');
                    const categoryInput = document.getElementById('edit-category');
                    const statusInput = document.getElementById('edit-status');                    
                    const longitudeInput = document.getElementById('edit-longitude');
                    const latitudeInput = document.getElementById('edit-latitude');
                    const areaInput = document.getElementById('edit-area');
                    const channelLevelInput = document.getElementById('edit-channelLevel');
                    const channelNameInput = document.getElementById('edit-channelName');
                    const deviceInput = document.getElementById('edit-device');
                    const operationTimeInput = document.getElementById('edit-operationTime');
                    const imageInput = document.getElementById('edit-image');

                    // 将已有数据填充到表单中
                    categoryInput.value = data.目标物类别;
                    statusInput.value = data.目标物状态;
                    longitudeInput.value = data.经度信息;
                    latitudeInput.value = data.纬度信息;
                    areaInput.value = data.地区信息;
                    channelLevelInput.value = data.航道等级;
                    channelNameInput.value = data.航道名称;
                    deviceInput.value = data.检测设备;
                    operationTimeInput.value = data.作业时间;

                    imageInput.src = `image/${data.检测数据}`;

                    // 显示模态框
                    modal.style.display = 'block';

                    // 处理表单提交事件
                    const editForm = document.getElementById('edit-data-form');
                    editForm.addEventListener('submit', function(event) {
                        event.preventDefault();

                        // 获取当前时间并格式化
                        const currentTime = new Date().toISOString().slice(0, 19).replace('T', ' ');

                        // 构建表单数据对象，用这种方式字段名将基于 HTML 表单元素的 name 属性
                        const formData = new FormData(this);
                              

                        // 发送请求
                        fetch(backendUrl + `/update-data/${data.id}`, {
                            method: 'POST',
                            body: formData
                        })
                        .then(response => {
                            if (response.ok) {
                                // 编辑成功，刷新页面
                                closeEditForm();
                                location.reload();
                            } else {
                                throw new Error('编辑数据失败');
                            }
                        })
                        .catch(error => {
                            console.error('编辑数据错误:', error);
                        });
                    });
                }


                // 查看详情
                function showDetails(id) {
                    // 通过id获取数据
                    fetch(backendUrl + `/get-data/${id}`)
                    .then(response => {
                        if (response.ok) {
                            return response.json();
                        } else {
                            throw new Error('无法获取数据详情');
                        }
                    })
                    .then(data => {
                        // 填充数据到模态框
                        const modalBody = document.getElementById('detailsModalBody');
                        modalBody.innerHTML = `
                            <p><strong>ID:</strong> ${data.id}</p>
                            <p><strong>目标物类别:</strong> ${data.目标物类别}</p>
                            <p><strong>目标物状态:</strong> ${data.目标物状态}</p>
                            <p><strong>经度信息:</strong> ${data.经度信息}</p>
                            <p><strong>纬度信息:</strong> ${data.纬度信息}</p>
                            <p><strong>地区信息:</strong> ${data.地区信息}</p>
                            <p><strong>航道等级:</strong> ${data.航道等级}</p>
                            <p><strong>航道名称:</strong> ${data.航道名称}</p>
                            <p><strong>检测数据:</strong> <img src="image/${data.检测数据}" alt="检测数据"></p>
                            <p><strong>检测设备:</strong> ${data.检测设备}</p>
                            <p><strong>录入时间:</strong> ${data.录入时间}</p>
                            <p><strong>作业时间:</strong> ${data.作业时间}</p>
                        `;

                        // 获取模态框元素
                        const modal = document.getElementById('detailsModal');
                        // 显示模态框
                        modal.style.display = 'block';

                        // 获取关闭按钮元素
                        const closeButton = document.getElementById('closeButton');

                        // 点击关闭按钮时触发
                        closeButton.addEventListener('click', () => {
                            modal.style.display = 'none';
                        });

                    })
                    .catch(error => {
                        console.error('获取数据详情失败:', error);
                    });
                }

                

                // JavaScript 中添加打开模态框的函数
                function zoomImage(img) {
                    var modal = document.getElementById("myModal");
                    var modalImg = document.getElementById("modalImg");
                    
                    modal.style.display = "block";
                    modalImg.src = img.src;
                }



            })
            .catch(error => {
                console.error('Failed to load config file', error);
            });
 
// 由于这个函数需要在html文件中调用，因此要写在fetch作用域外面         
// JavaScript 中关闭模态框的函数           
function closeZoomModal() {
    var modal = document.getElementById("myModal");
    modal.style.display = "none";
}

// 关闭编辑表单
function closeEditModal() {
    document.getElementById('edit-data-modal').style.display = 'none';
}


// 添加数据按钮点击事件
document.getElementById('add-data-btn').addEventListener('click', function() {
    // 显示模态框
    document.getElementById('add-data-modal').style.display = 'block';
});


// 关闭添加数据的模态框函数
function closeAddModal() {
    document.getElementById('add-data-modal').style.display = 'none';
}

fetch('config.json')
        .then(response => response.json())
        .then(config => {
            const backendUrl = config.backendUrl;
            // 表单提交事件
            document.getElementById('add-data-form').addEventListener('submit', function(event) {
                event.preventDefault(); // 阻止默认表单提交行为

                // 获取当前时间
                const now = new Date();
                const formattedTime = now.toISOString().slice(0, 19).replace('T', ' ');

                // 填充录入时间字段
                document.getElementById('inputTime').value = formattedTime;

                // 从表单中获取数据
                const formData = new FormData(this);

                // 发送数据到后端
                fetch(backendUrl + '/add-data', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    console.log(data);
                    // 清空表单
                    this.reset();
                    // 关闭模态框
                    document.getElementById('add-data-modal').style.display = 'none';
                })
                .catch(error => console.error('Error:', error));
            });


        })
        .catch(error => {
            console.error('Failed to load config file', error);
        });





fetch('config.json')
        .then(response => response.json())
        .then(config => {
            const backendUrl = config.backendUrl;
            // 在这里使用 backendUrl，比如发送请求给后端
            

        })
        .catch(error => {
            console.error('Failed to load config file', error);
        });